<template>
	<view>
		<!-- 1 -->
		<view class="nav-box">
			<view class="search-box">
				<image class="icon" src="/static/image/search-line.png"></image>
				<input :focus="focusShow" @confirm="onSearchConfirm" @input="onSearchInput" class="input"
					confirmType="search" name="keyword" placeholder="输入名称搜索圈子" placeholderClass="placeholder"
					type="text" :value="keyword" />
			</view>
			<view class="add-box" @tap="addNewCircle">
				<image class="addimage" src="/static/image/newcircle.png" />
				建圈
			</view>
		</view>
		<!-- 2 -->
		<view class="tabs">
			<view class="flex">
				<u-tabs :list="list1" scrollable="true" lineWidth="8" lineHeight="3" lineColor="#353535"
					:activeStyle="{'height': '42rpx','font-size': '30rpx','font-family': 'PingFang SC-Semibold PingFang SC','font-weight': '600','color': '#353535'}"
					:inactiveStyle="{'height': '42rpx','font-size': '30rpx','font-family': 'PingFang SC-Semibold PingFang SC','font-weight': '600','color': '#959595'}"></u-tabs>
				<view class="more">
					发现更多
				</view>
			</view>
		</view>
		<!-- 3 -->
		<view class="" style="margin-left: 30rpx;">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="list" style="display: flex;">
					<view class="item " v-for="item,index in 5" :key="index" style="margin-right: 16rpx;">
						<image src="/static/img/quanzi/55790.png" mode="" style="width: 184rpx;height: 184rpx;"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 4 -->
		<view class="">
			<view slot="body" class="body-box">
				<block>
					<view class="">
						<scroll-view scrollX class="hot-search-content" style="white-space: nowrap">
							<view class="first-content">
								<view :data-id="item.id"
									:class="'hot-search-item ' + (index == 0 ? 'margin-left' : '') + ' ' + (index == tags.length - 1 ? 'margin-right' : '')"
									v-if="index < 8" v-for="(item, index) in cats" :key="index">
									<image class="xclimage" src="/static/image/topic.png" />

									<text>{{ item.plate_name }}</text>

									<view class="hot" v-if="index % 3 == 0">
										<image mode="aspectFill" src="/static/image/hot_search_icon.png">
										</image>
									</view>
								</view>
							</view>
							<view class="first-content">
								<view :data-id="item.id"
									:class="'hot-search-item ' + (index == 8 ? 'margin-left' : '') + ' ' + (index == tags.length - 1 ? 'margin-right' : '')"
									v-if="index >= 8 && index < 16" v-for="(item, index) in cats" :key="index">
									<image class="xclimage" src="/static/image/topic.png" />

									<text>{{ item.plate_name }}</text>

									<view class="hot" v-if="index % 2 == 0">
										<image mode="aspectFill" src="/static/image/hot_search_icon.png">
										</image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</block>
				<!--  -->


			</view>
		</view>
		<!-- 5 -->
		<view class="">
			<u-gap height="8" bgColor="#F6F6F6"></u-gap>
		</view>
		<!-- 6 -->
		<view class="">
			<view class="list ml30 mr30">
				<view class="item">
					<view class="circle-content">
						<!-- conent -->
						<view class="topic-list">
							<block>
								<template name="circle" v-if="true">
									<!-- content -->
									<view @click="$pub.go('/pages_quanzi2/quanzi/quanzi')" class="topic-detail-view"
										v-for="(pitem, pindex) in posts" :key="pindex">
										<!-- top -->
										<view class="circle-top">
											<view>
												<view class="club-name">
													<image class="climage" src="/static/image/circle-mix.png" />
													{{ pitem.subcats.circle_name }}
													<view class="" style="
																		margin-left: 26rpx;
																		height: 32rpx;
																		font-size: 22rpx;
																		font-family: PingFang SC-Medium, PingFang SC;
																		font-weight: 500;
																		color: #A14BFF;
																		">
														{{pitem.subcats.clubId}}
													</view>
												</view>
												<view class="area-club-creater" style="color: #333">
													<text>{{ pitem.subcats.posts_count }}条动态</text>
													<view class="shu"></view>
													<text>{{ pitem.subcats.user_circle_count }}圈友在讨论</text>
												</view>
											</view>
											<view class="set-focus" :data-id="item.clubId"
												:style="'background: url(' + item.head_portrait + ') center/cover no-repeat #f5f5f5;'"
												:data-index="index">
												<view class="circle-icon-box">
													<!-- <image src="/static/image/jump.png"></image> -->
													<image src="/static/img/quanzi/add.png"></image>
												</view>
											</view>
										</view>


										<view class="topic-panel" :id="'media_' + pitem.id">
											<view class="user-info-view">
												<navigator class="user-avatar-view" hover-class="none"
													:url="'/pages/user/user?id=' + pitem.user.id">
													<image class="user-avatar-image" compression="avatar"
														mode="aspectFill" :src="pitem.user.user_avatar"></image>
													<view class="user-view">
														<view class="user-name">
															<text
																class="user-nick-text">{{ pitem.user.user_name }}</text>
															<image style="display: none;"
																v-if="pitem.user.is_official == 1" class="header-label"
																src="/static/image/official.png" />
															<image style="display: none;"
																v-if="pitem.user.is_authentication == 1"
																class="header-label"
																src="/static/image/authentication.png" />
															<image style="display: none;"
																v-if="pitem.user.is_member == 1" class="header-label"
																src="/static/image/vip.png" />
														</view>
													</view>
												</navigator>
												<view style="translate: -70rpx;" class="format-time-view">
													{{ pitem.format_time }}
												</view>
												<view class="user-rigth">
													<block v-if="!pitem.is_my_posts">
														<view @tap.stop.prevent="postsActionFollow"
															:data-userid="pitem.user.id" :data-index="index"
															class="follow-view" v-if="!pitem.is_follow_user">
															关注
														</view>
														<image @tap.stop.prevent="postsActionFollow"
															:data-userid="pitem.user.id" :data-index="index"
															v-else-if="pitem.is_follow_user" class="follow-ygz"
															src="/static/image/live_personal_ic_adding@3x.png"></image>
													</block>
													<image @tap.stop.prevent="editTap"
														:data-ismyposts="pitem.is_my_posts"
														:data-iscollect="pitem.is_collect" :data-index="index"
														class="follow-image" :data-id="pitem.id"
														src="/static/image/more_black_icon_show.png"></image>
												</view>
											</view>

											<block v-if="!pitem.is_delete">
												<u-parse
													:class="'content-view ' + (pitem.is_content_beyond ? 'ellipsis' : 'unellipsis')"
													:content="pitem.posts_content"></u-parse>
												<!-- <mp-html :content="pitem.posts_content"
													:class="'content-view ' + (pitem.is_content_beyond ? 'ellipsis' : 'unellipsis')" /> -->
												<!-- 												<view class="content-view-unfold" v-if="pitem.is_content_beyond"
													@tap="unfoldTap" :data-id="pitem.id">
													<view>...</view>
													<view>展开</view>
												</view> -->
												<!-- v-if="pitem.video == null && pitem.images.length > 0" -->
												<!-- v-if="pitem.images.length == 1" -->
												<view class="img-lists">
													<block>
														<view class="one-pictures-box">
															<image @tap.stop.prevent="previewImgFunc"
																class="one-pictures" :data-list="pitem.images"
																:data-src="imgItem.img_url" mode="aspectFill"
																src="/static/img/friendGroup/bg.png" :key="index1">
															</image>
														</view>
													</block>
													<!-- 												<block v-if="pitem.images.length == 1">
														<view class="one-pictures-box">
															<image @tap.stop.prevent="previewImgFunc"
																class="one-pictures" :data-list="pitem.images"
																:data-src="imgItem.img_url" mode="aspectFill"
																:src="imgItem.img_url"
																v-for="(imgItem, index1) in pitem.images" :key="index1">
															</image>
														</view>
													</block> -->
													<!-- 													<block v-else>
														<imageload
															@tap.native.stop.prevent="previewImgFunc($event, { list: pitem.images, src: imgItem.img_url })"
															:class="'image-box ' + (pitem.images.length == 4 ? 'four-picture' : '')"
															:data-list="pitem.images" :data-src="imgItem.img_url"
															mode="aspectFill" :src="imgItem.img_url"
															v-for="(imgItem, index1) in pitem.images" :key="index1">
														</imageload>
													</block> -->
												</view>
												<view
													:class="'videomodel ' + (pitem.video.show_type == 0 ? 'h-video' : 'w-video')"
													v-if="pitem.video != null && pitem.video != ''">
													<image @tap="getVideoUrl" :data-video="pitem.video.video_url"
														mode="aspectFill" class="video-image" :data-index="index"
														:src="pitem.video.video_thumb_url"></image>
													<view class="vide-icon-box" @tap="getVideoUrl"
														:data-video="pitem.video.video_url" :data-index="index">
														<image src="/static/image/ic_video.png" class="vide-icon" />
													</view>
													<video v-if="popupshow && index == indexvideo"
														class="video-image z-i4" :unit-id="vutad" :controls="true"
														:show-fullscreen-btn="true" :enable-play-gesture="true"
														:show-play-btn="true" :enable-progress-gesture="true"
														:autoplay="true" :loop="true" object-fit="contain"
														:src="pitem.video.video_url"></video>
												</view>
												<view style="display: none;" class="format-time-view">
													{{ pitem.format_time }}
												</view>
												<!--  -->
												<scroll-view style="translate: 0px -50px;" v-if="" scrollX
													enableFlex="enable-flex" enhanced="enhanced"
													scrollWithAnimation="scroll-with-animation" :showScrollbar="false"
													class="address-tag-all-view">
													<view @tap="openmap" :data-lat="pitem.address.latitude"
														:data-lng="pitem.address.longitude"
														:data-name="pitem.address.address_detailed" class="address-view"
														v-if="pitem.address != null && pitem.address != ''">
														<image class="view-image" mode="widthFix"
															src="/static/image/loc_icon_show.png"></image>
														<text
															class="view-text">{{ pitem.address.address_detailed }}</text>
													</view>
													<view style="
															height: 64rpx;
															background: #000000;
															border-radius: 32rpx 32rpx 32rpx 32rpx;
															opacity: 0.46;
															border: 2rpx solid #F3F3F3;" class="tag-view" @tap.stop.prevent="toTagesInfo" :data-name="tag.tags_name"
														:data-id="tag.id" v-if="pitem.tags.length > 0"
														v-for="(tag, index1) in pitem.tags" :key="index1">
														<image class="view-image" src="/static/image/topic.png"></image>

														<text class="view-text">{{ tag.tags_name }}</text>
													</view>
													<!-- 													<view @tap.stop.prevent="routeClubDetail" class="related-subject"
														:data-id="pitem.circle.id">
														<text>{{ pitem.circle.circle_name }}</text>
													</view> -->
												</scroll-view>

												<view class="card__footer">
													<view class="share" :data-index="index" :data-userid="pitem.user.id"
														:data-id="pitem.id" @tap.stop.prevent="rewardTap">
														<!-- 														<image mode="aspectFill"
															src="/static/image/money-cny-circle-line.png" />
														<text>打赏</text> -->
													</view>
													<view class="upvoteAndreply">
														<view class="upvote">
															<image :data-index="index" :data-id="pitem.id"
																@tap.stop.prevent="shareTap" mode="aspectFill"
																src="/static/image/share-forward-line.png"></image>
														</view>
														<view @tap="gotoComments" :data-index="index"
															:data-comment_count="pitem.comment_count"
															:data-id="pitem.id" class="reply">
															<image :lazyLoad="true" mode="aspectFill"
																src="/static/image/message-3-line.png"></image>
															<!-- <text>{{ filters.toFix(pitem.comment_count) }}</text> -->
														</view>
														<view @tap.stop.prevent="taplikes" :data-id="pitem.id"
															:data-index="index" class="reply">
															<image :animation="subject.voteAnimation" :lazyLoad="true"
																mode="aspectFill"
																:src="pitem.is_like ? '/static/image/heart-fill.png' : '/static/image/heart-line.png'">
															</image>
															<!-- <text>{{ filters.toFix(pitem.like_count) }}</text> -->
														</view>
													</view>
												</view>

												<view class="reward-box" v-if="pitem.exceptional.length > 0"
													:data-id="pitem.id" @tap="onClickReward"
													:data-ecount="pitem.exceptional_count">
													<view class="cu-avatar-group">
														<view v-if="pitem.exceptional_count > 6"
															class="cu-avatar round dian">•••
														</view>
														<view class="cu-avatar round"
															:style="'background-image:url(' + exceptional.user_avatar + ');'"
															v-for="(exceptional, index1) in pitem.exceptional"
															:key="index1">
														</view>
													</view>
													<view class="cu-avatar-text">{{ pitem.exceptional_count }}人打赏</view>
												</view>

												<view class="commnet-content-view-box" style="display: none;">
													<view @tap="gotoComments" :data-index="index"
														:data-comment_count="pitem.comment_count" :data-id="pitem.id"
														class="commnet-content-view" v-if="pitem.comment.length > 0"
														v-for="(citem, index1) in pitem.comment" :key="index1">
														<view class="comment-detail-view">
															<text class="content-title">
																{{ citem.user_name }}
																<text v-if="citem.posts_user_id == citem.user_id"
																	class="content-zuozhe">作者</text>
																：
															</text>
															<text
																v-if="citem.comment_content != null">{{ citem.comment_content }}</text>
															<text
																v-if="citem.comment_img_url != null && citem.comment_img_url != ''">[动画表情]</text>
														</view>
													</view>
												</view>

												<view style="display: none;" class="to_add_comments"
													:data-postsid="item.id" @tap.stop.prevent="tapComment">说点什么...
												</view>
											</block>
										</view>

										<!-- 广告块 -->
										<view class="ad-box" v-if="ad && index % 6 == 1">
											<view class="adContainer">
												<ad-custom :unit-id="ad"></ad-custom>
											</view>
										</view>
									</view>


									<view @touchmove.stop.prevent="touchmove"
										:class="'dialog ' + (showDialog ? 'dialog_show' : '')">
										<view @tap="onClickCancle" class="dialog_mask"></view>
										<view class="dialog_container">
											<view class="dialog_conent">
												<view @tap.stop.prevent="editOrCollectTap" class="select-item">
													{{ isCollect ? '取消收藏' : '收藏' }}
												</view>
												<view v-if="isMyPosts" @tap.stop.prevent="editOrDeleteTap"
													class="select-item" id="delete">删除</view>
												<view @tap="onClickCancle" class="cancel-btn">取消</view>
											</view>
										</view>
									</view>

									<view @touchmove.stop.prevent="touchmove"
										:class="'dialog ' + (bounced ? 'dialog_show' : '')">
										<view @tap="bouncedTap" class="dialog_mask"></view>
										<view class="dialog_container">
											<view class="dialog_conent">
												<view @tap.stop.prevent="bouncedDeleteTap" class="delete-btn"
													id="delete">确认删除
												</view>
												<view @tap="bouncedTap" class="cancel-btn">取消</view>
											</view>
										</view>
									</view>

									<view @touchmove.stop.prevent="touchmove"
										:class="'dialog ' + (showShare ? 'dialog_show' : '')">
										<view @tap="onClickShare" class="dialog_mask"></view>
										<view class="dialog_container">
											<view class="dialog_conent">
												<view class="dialog_box">
													<button open-type="share" class="dialog_btn">
														<image src="/static/image/wechat.png"></image>
														微信好友
													</button>
													<view @tap.stop.prevent="sharePosterClick" class="dialog_btn">
														<image src="/static/image/camera.png"></image>
														朋友圈
													</view>
												</view>
												<view @tap="onClickShare" class="cancel-btn">取消</view>
											</view>
										</view>
									</view>

									<view @touchmove.stop.prevent="touchmove"
										:class="showComments ? 'dialog_show' : ''">
										<view @tap.stop.prevent="toShutComments" class="dialog_mask"></view>
										<view class="dialog_container">
											<view class="dialog_box_title">
												<!-- 评论 {{ commentCount > 999 ? filters.toFix(commentCount) : commentCount }} -->
												<image src="/static/image/close-fill.png"
													@tap.stop.prevent="toShutComments" />
											</view>
											<scroll-view :scroll-y="true" class="dialog_comments" enhanced
												:show-scrollbar="false" @scrolltolower="commentTolower"
												lower-threshold="0">
												<view class="comment-reply">
													<view class="comment-reply-item" v-for="(item, cindex) in comments"
														:key="cindex">
														<view class="comment-header">
															<view class="comment-header-left"
																@tap.stop.prevent="userTap" :data-uid="item.user_id">
																<image class="comment-avatar" :src="item.user_avatar">
																</image>
																<view class="comment-user-date">
																	<text>
																		{{ item.user_name }}
																		<text v-if="item.posts_user_id == item.user_id"
																			class="comment-zuozhe">作者</text>
																	</text>
																	<text>{{ item.format_time }}</text>
																</view>
															</view>
															<view class="comment-header-right">
																<!-- <view>{{ filters.toFix(item.like_count) }}</view> -->
																<image :data-id="item.id" :data-cmtindex="cindex"
																	@tap="tapCommentlike"
																	src="/static/image/heart-fill.png"
																	v-if="item.is_like"></image>
																<image :data-id="item.id" :data-cmtindex="cindex"
																	@tap="tapCommentlike"
																	src="/static/image/heart-line.png" v-else></image>
																<text v-if="item.user_id == item.uid"
																	:data-cmtindex="cindex" @tap="tapDeleteComment"
																	:data-id="item.id">删除</text>
															</view>
														</view>

														<view class="comment-content" @tap="tapComment"
															:data-id="item.id" :data-userid="item.user_id"
															:data-reply="item.user_name">
															<view class="commentconent">
																<view class="contentinfo">
																	<block v-if="item.comment_content != null">
																		{{ item.comment_content }}
																	</block>
																</view>
															</view>
															<image
																v-if="item.comment_img_url != null && item.comment_img_url != ''"
																class="img-list" :lazy-load="true"
																@tap.stop.prevent="previewImgFunc"
																:data-list="item.imgList"
																:data-src="item.comment_img_url" mode="aspectFill"
																:src="item.comment_img_url"></image>
														</view>

														<view class="replay-content"
															v-for="(items, cindexs) in item.child" :key="cindexs">
															<view class="comment-header">
																<view class="comment-header-left"
																	@tap.stop.prevent="userTap"
																	:data-uid="items.user_id">
																	<image class="comment-avatar"
																		:src="items.user_avatar">
																	</image>
																	<view class="comment-user-date">
																		<text>{{ items.user_name }}</text>
																		<text>{{ items.format_time }}</text>
																	</view>
																</view>
																<view class="comment-header-right">
																	<!-- <view>{{ filters.toFix(items.like_count) }}</view> -->
																	<image :data-id="items.id" :data-cmtindex="cindex"
																		:data-cmtindexs="cindexs" @tap="tapCommentslike"
																		src="/static/image/heart-fill.png"
																		v-if="items.is_like">
																	</image>
																	<image :data-id="items.id" :data-cmtindex="cindex"
																		:data-cmtindexs="cindexs" @tap="tapCommentslike"
																		src="/static/image/heart-line.png" v-else>
																	</image>
																	<text v-if="item.user_id == item.uid"
																		:data-id="items.id" :data-cmtindex="cindex"
																		:data-cmtindexs="cindexs"
																		@tap="tapDeleteComments">
																		删除
																	</text>
																</view>
															</view>

															<view class="comment-content" @tap="tapComment"
																:data-id="item.id" :data-reply="items.user_name"
																:data-userid="items.user_id">
																<view class="commentconent">
																	<view class="contentinfo">
																		<block
																			v-if="item.user_id != items.comment_agent_id">
																			回复
																			<text>{{ items.comment_agent_name }}</text>
																			：
																		</block>
																		<block v-if="items.comment_content != null">
																			{{ items.comment_content }}
																		</block>
																	</view>
																</view>
																<image
																	v-if="items.comment_img_url != null && items.comment_img_url != ''"
																	class="img-list" :lazy-load="true"
																	@tap.stop.prevent="previewImgFunc"
																	:data-list="items.imgList"
																	:data-src="items.comment_img_url" mode="aspectFill"
																	:src="items.comment_img_url"></image>
															</view>
														</view>
													</view>
													<!-- 													<l-loadmore :show="isCommentShow"
														:type="isCommentPage ? 'end' : 'loading'" end-text="已经到底了"
														loading-text="" size="28" color="#949494" /> -->
												</view>
												<block v-if="commentIsNull && comments.length <= 0">
													<empty-view
														icon="https://qinghang-1305480232.cos.ap-guangzhou.myqcloud.com/Messaging%20fun-rafiki.png"
														title="快来抢占沙发吧"></empty-view>
												</block>
											</scroll-view>
											<view class="add_comments" :data-index="index" :data-id="item.id"
												@tap.stop.prevent="tapComment">
												说点什么
												<image @tap.stop.prevent="addCommentPic" data-name="imageValue"
													src="/static/image/image-line-add.png"></image>
											</view>
										</view>
									</view>

									<view @tap="shutCommentShow" @touchmove.stop.prevent="touchmove"
										:class="'comment-dialog-bg ' + (!showTextarea ? 'comment-dialog-bg-hidden' : '')">
									</view>
									<view @touchmove.stop.prevent="touchmove" class="comment-dialog-container"
										v-if="showTextarea">
										<view class="imgs-box" v-if="imageValue != ''">
											<image mode="aspectFill" :lazy-load="true" :src="imageValue"></image>
											<image @tap="delCommentPic" class="del"
												src="/static/image/icon_delete_buoy.png">
											</image>
										</view>
										<view class="comment-dialog-bottom">
											<input confirm-type="send" @confirm="onInputComment"
												class="comment-dialog-input" cursorSpacing="16rpx" :focus="focus"
												maxlength="1000" :placeholder="replyName" :value="inputValue" />
											<image @tap="addCommentPic" data-name="imageValue"
												class="comment-dialog-image" mode="aspectFill"
												src="/static/image/image-line-add.png"></image>
										</view>
									</view>
								</template>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 7 -->
		<!-- 底部 -->
		<tabbar></tabbar>


	</view>
</template>

<script>
	import choicesApi from './choicesApi.js'
	import postsApi from './postsApi.js'
	import filters from './filters.js'
	export default {
		// components: {
		// 	imageload,
		// },
		data() {
			return {
				filters: filters,
				posts: [],
				choices: [],
				subcats: [{
						circle_name: "open AI",
						posts_count: "161",
						user_circle_count: "32",
						head_portrait: "",
						clubId: 'A00001'
					},
					{
						circle_name: "刺客伍六七",
						posts_count: "510",
						user_circle_count: "99",
						head_portrait: "",
						clubId: 'b55551'
					},

				],
				tags: [],

				cats: [{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
					{
						plate_name: '时尚',
						id: Math.random()
					},
				],

				list1: [{
						name: '精选',
					},
					{
						name: '小组',
					},
					{
						name: '活动',
					}
				],
			};
		},
		methods: {
			getChoices() {
				this.choices = choicesApi.data
			},
			getPosts() {
				this.posts = postsApi.data.data

			},

			unfoldTap(e) {
				let that = this;
				let id = e.currentTarget.dataset.id;
				let posts = that.data.posts;
				for (var item in this.posts) {
					if (posts[item].id == id) {
						posts[item].is_content_beyond = false;
						break;
					}
				}
				that.setData({
					posts: posts
				})
			},
			tapComment() {

			},
			commentCount() {

			},
			commentIsNull() {

			},
			comments() {

			},

			/*  */
			openmap() {

			},
			toTagesInfo() {

			},
			routeClubDetail() {

			},
			rewardTap() {

			},
			shareTap() {

			},
			gotoComments() {

			},
			taplikes() {

			},
			onClickReward() {

			},
			gotoComments() {

			},
			touchmove() {

			},
			onClickCancle() {

			},
			editOrDeleteTap() {

			},
			bouncedDeleteTap() {

			},
			onClickShare() {

			},
			userTap() {

			},
			tapCommentlike() {

			},
			tapDeleteComment() {

			},
		},
		onShow() {
			/*  */
			this.getChoices()
			this.getPosts()




		},
	}
</script>

<style lang="scss">
	@import url("./new_file.css");
	@import url("./index.css");

	/* 动态 */
	.shu {
		width: 3rpx;
		height: 18rpx;
		background: #333333;
		margin: 0 10rpx;
	}

	.item-list {
		width: 690rpx;
		margin: 20rpx auto 30rpx;
	}

	.circle-top {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.club-name {
		font-size: 36rpx;
		font-weight: bold;
		height: 65rpx;
		display: flex;
		align-items: center;
	}

	.climage {
		width: 42rpx;
		height: 42rpx;
		margin-right: 10rpx;
	}

	.qzimage {
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}

	.set-focus {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		position: relative;
	}

	.set-focus .circle-icon-box {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 58rpx;
		height: 58rpx;
		border-radius: 50%;
		background: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.set-focus .circle-icon-box image {
		width: 32rpx;
		height: 32rpx;
	}

	.circle-box {
		position: relative;
		width: 100%;
		margin-top: 20rpx;
		height: 140rpx;
		border-radius: 10rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.circle-box-icon {
		width: 67rpx;
		height: 64rpx;
		margin: 0 20rpx 0 30rpx;
	}

	.circle-box-icon-img {
		position: absolute;
		z-index: 9;
		bottom: 56rpx;
		width: 36rpx;
		height: 36rpx;
		margin-left: 46rpx;
		text-align: center;
	}

	.circle-box-icon-text {
		position: absolute;
		overflow: hidden;
		z-index: 9;
		bottom: 64rpx;
		width: 50rpx;
		height: 28rpx;
		margin-left: 40rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}

	.circle-box-title {
		width: 422rpx;
		font-size: 26rpx;
		line-height: 35rpx;
		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.circle-box-img {
		width: 90rpx;
		height: 90rpx;
		margin: 0 24rpx;
		border-radius: 8rpx;
	}

	/* tabs2 */
	.body-box {
		// margin-bottom: 200rpx;
	}

	.hot-search-content {
		margin-top: 20rpx;
		height: 210rpx;
		width: auto;
	}

	.first-content {
		margin-top: 20rpx;
	}

	.second-content {
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.hot-search-item {
		background: #f5f5f5;
		display: inline-block;
		align-items: center;
		border-radius: 50px;
		padding: 16rpx 26rpx;
		margin-right: 30rpx;
		position: relative;
	}

	.xclimage {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
	}

	.hot-search-item text {
		padding-left: 46rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}

	.hot {
		width: 58rpx;
		height: 28rpx;
		position: absolute;
		top: -14rpx;
		right: -20rpx;
	}

	.hot image {
		width: 58rpx;
		height: 28rpx;
	}


	.margin-left {
		margin-left: 30rpx;
	}

	.margin-right {
		margin-right: 30rpx;
	}

	/* tabs */
	.tabs {
		.flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.more {
			width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #959595;
		}
	}



	/*  */
	page {
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}

	.nav-box {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 90rpx;
		position: relative;
	}

	.search-box {
		width: 560rpx;
		height: 60rpx;
		background: #f5f5f5;
		border: 1px solid #f5f5f5;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.search-box .icon {
		width: 38rpx;
		height: 38rpx;
		margin: 0 15rpx 0 20rpx;
	}

	.search-box .input {
		width: 448rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.placeholder {
		margin-top: 4rpx;
		font-size: 24rpx;
		color: #949494;
	}




	.add-box {
		margin-left: 20rpx;
		width: 130rpx;
		height: 60rpx;
		border: 1px solid #333333;
		border-radius: 10rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addimage {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	button {
		margin: 0;
		padding: 0;
		line-height: normal;
		background-color: transparent;
	}

	button::after {
		content: none;
	}
</style>